import mapboxgl from 'mapbox-gl';
import { observable } from 'rxjs';
import {
    Observable,
    forkJoin,
    fromEvent,
} from 'rxjs';
export class EchartObject {
    coords: Array<number>;
    option: object;
    constructor(coords: Array<number>, option: object) {
        this.coords = coords;
        this.option = option;
    }
}

export class EchartLayer {
    name: any;
    layer: any;
    size: any;
    data: Array<EchartObject>;
    markers: any;
    map: any;
    scaling: any;
    rank: boolean;
    state: boolean;
    // [{
    //     coords: [112, 32],
    //     option: {}
    // }];
    constructor(option: object, data: Array<EchartObject>, map: any) {
        this.name = name;
        this.data = data;
        this.map = map;
        this.markers = [];
        this.size = {
            width: '180px',
            height: '180px'
        };
        this.scaling = option;
        this.rank = false;
        this.state = false;
        this.initData();

        // 根据地图缩放比例显示隐藏
        map.on('zoomend', (e) => {
            const self = this;
            console.log(self.rank);
            const mapzoom = self.map.getZoom();
            if (self.state) {
                if (mapzoom >= self.scaling.minZoom && mapzoom <= self.scaling.maxZoom) {
                    self.show();
                } else {
                    self.hide();
                }
            } else {
                self.hide();
            }

        });
    }

    initData() {
        const self = this;
        console.log(self.map.getZoom());
        // 创建 marker对象，实现echart展示
        this.data.forEach(element => {
            const div = document.createElement('div');
            div.style.width = self.size.width;
            div.style.height = self.size.height;
            const marker = new mapboxgl.Marker(div)
                .setLngLat(element.coords)
                .addTo(self.map);
            const myecharts = echarts.init(div);
            myecharts.setOption(element.option);
            marker.hmecharts = myecharts;
            self.markers.push(marker);
        });
    }
    show() {
        const self = this;
        self.rank = true;
        this.state = true;
        // console.log(self.map);
        self.markers.forEach(e => {
            e.addTo(self.map);
        });
    }
    hide() {
        const self = this;
        self.rank = false;
        self.markers.forEach(e => {
            e.remove();
        });
    }
    setWidthHeight(w, h) {
        const self = this;
        self.size = {
            width: w + 'px',
            height: h + 'px',
        };
        self.markers.forEach(e => {
            e.getElement().style.width = self.size.width;
            e.getElement().style.height = self.size.height;
        });
        self.markers.forEach(e => {
            e.hmecharts.resize();
        });
    }

}
